<!-- 应用市场 -->
<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="插件名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入插件名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-tabs v-model="activeName"  @tab-click="handleTabClick">
          <el-tab-pane :label="dict.label" :name="dict.value" v-for="dict in classifyOptions" :key="dict.label"></el-tab-pane>
        </el-tabs>-->

    <!--应用列表-->
    <div class="box">
      <div class="cards">
        <div class="cards_item" v-for="(item, index) in list">
          <el-card :body-style="{ padding: '0px'}" style="width: 280px;">
            <el-carousel height="240px">
              <el-carousel-item v-for="item in (item.thumbnail|| '').split(',')" :key="item">
                <img :src="item" class="image">
              </el-carousel-item>
            </el-carousel>
            <div style="padding: 14px;">
              <span>{{ item.name }}</span>
              <div class="bottom clearfix">
                <div>
                  <div>最近更新：
                    <time class="time">{{ item.updateTime }}</time>
                  </div>
                  <div style="margin-top: 5px;">最新版本：{{ item.latestSn }}</div>
                </div>
                <div style="padding: 10px">
                  <router-link :to="{path:'/app/info',query:{id:item.id}}" v-hasPermi="['sys:app-manage:create']">
                    <el-button type="text" class="button">详情</el-button>
                  </router-link>
                  <el-button type="text" v-if="isInstall(item.appShort,item.latestSn)" class="button"
                             @click="install(item.appShort,item.latestSn)">安装
                  </el-button>
                  <el-button type="text" v-if="isUpdate(item.appShort,item.latestSn)" class="button"
                             @click="update(item.appShort,item.latestSn)">更新
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
//import { getAppPage} from "@/api/product/market";
import {getPluginList, getAppPage, onlineInstall, onlineUpdate} from "@/api/addons/appStoreControl";
import {isNotEmpty} from "@/utils/ruoyi";

export default {
  name: "marketplace",
  components: {},
  data() {
    return {
      activeName: '',
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 文件列表
      list: [],
      appList: [],
      // 弹出层标题
      title: "",
      dateRangeCreateTime: [],
      //分类
      classifyOptions: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        id: null,
        type: null,
        createTime: []
      },
    };
  },
  async created() {
    var classifyDict = this.getDictDatas("app_market_classify");
    this.classifyOptions = classifyDict;
    //this.activeName=this.classifyOptions[0].value;
    this.getList();
    await getPluginList().then(response => {
      debugger
      this.appList = response.data;
    });
  },
  filters: {
    carousel(val) {
      return val.split(',')
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleTabClick(tab, event) {
      this.queryParams.type = tab.name;
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      // 执行查询
      getAppPage(this.queryParams).then(response => {
        console.info(response);
        this.list = response.data.list;
        // for (let i = 0; i < this.list.length; i++) {
        //   debugger
        //   //preview
        //   var imgs = this.list[i].thumbnail.split(',');
        //   if(imgs.length > 1){
        //     this.list[i].preview=imgs[0];
        //   }else{
        //     this.list[i].preview=imgs;
        //   }
        // }
        this.total = response.data.total;
        this.loading = false;
      });
    },
    install(appShort, version) {
      debugger
      onlineInstall({appShort: appShort, version: version}).then(response => {
        if (response.code === 0) {
          this.$modal.msgSuccess("安装成功");
        }
      });
    },
    update(appShort, version) {
      onlineUpdate({appShort: appShort, version: version}).then(response => {
        if (response.code === 0) {
          this.$modal.msgSuccess("更新成功");
        }
      });
    },
    isInstall(appShort) {
      for (let i = 0; i < this.appList.length; i++) {
        let app = this.appList[i];
        debugger
        if (appShort === app.pluginDescriptor.pluginId) {
          return false;
        }
      }
      return true;
    },
    getInstallApp(appShort) {
      for (let i = 0; i < this.appList.length; i++) {
        let app = this.appList[i];
        debugger
        if (appShort === app.pluginDescriptor.pluginId) {
          return app;
        }
      }
      return null;
    },
    isUpdate(appShort, latestSn) {
      debugger
      var installApp = this.getInstallApp(appShort);
      if (isNotEmpty(installApp)) {
        debugger
        let currentSn = parseInt(installApp.pluginDescriptor.version.replaceAll(".", ""));
        let sn = parseInt(latestSn.replaceAll(".", ""));
        if (currentSn < sn) {
          return true;
        } else {
          return false;
        }
      }
      return false;
    }
  }
};
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

* {
  box-sizing: border-box;
}

.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*  margin-left: -8px;
    margin-right: -8px;
    margin-bottom: -8px;
    margin-top: 7px;*/
}

.cards_item {
  margin: 5px;
}

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  /*padding: 8px;*/
  width: 100%;
  margin: 0 auto;
  /*background-color: antiquewhite;*/
}
</style>
